<template>
	<uni-popup ref="popupRef" type="bottom" border-radius="20px 20px 0 0" background-color="#fff" :safe-area="true">
		<view class="main">
			<view class="title"> 帮TA助力 </view>
			<input class="input" placeholder="填写加热心愿值 不可低于1000" v-model="wish" />
			<view class="tip">快捷选项</view>
			<view class="box">
				<view :class="i.wish == wish ? 'active' : ''" class="box-item" v-for="(i, index) in info.data"
					:key="index" @click="handleCheckWish(i)">
					{{ i.wish }}
				</view>
			</view>
			<view class="u-f-ac u-f-jsb bb">
				<view>
					<text>我的心愿值：</text>
					<text style="color: #fe4369">{{ info.wish }}</text>
				</view>
				<view class="hq">
					获取心愿值>
				</view>
			</view>
			<view class="btn" @click="handleZhuli"> 帮TA加热 </view>
		</view>
	</uni-popup>
	<nengliang-model ref="nengliangRef"></nengliang-model>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed,
		watchEffect
	} from "vue";
	import {
		onReady,
		onLoad
	} from "@dcloudio/uni-app";
	import {
		getHttpApi,
		postHttpApi
	} from "@/api/base";
	let group_id = ref(null)
	const popupRef = ref(null);
	const nengliangRef = ref(null)
	const close = () => {
		popupRef.value.close();
	};
	const open = (id) => {
		group_id.value = id
		getGroupSeting();
		popupRef.value.open();
	};
	// 拼团默认设置
	let info = ref({});
	const getGroupSeting = async () => {
		try {
			let res = await getHttpApi({
				type: 5,
				mid: 4,
				route: "group-buying.groupSeting",
			});
			info.value = res.data;
		} catch (e) {
			//TODO handle the exception
		}
	};
	let wish = ref(null);
	const handleCheckWish = (i) => {
		wish.value = i.wish;
	};
	// 帮他助力
	const emit = defineEmits(["zhuliBack"]);
	const handleZhuli = async () => {
		try {
			let res = await postHttpApi(
				`&type=5&mid=4&route=group-buying.helpGroupBuying&group_id=${group_id.value}`,{
					wish: wish.value,
				}
			);
			await getGroupSeting()
			nengliangRef.value.open(res.data.wish)
			emit("zhuliBack")
		} catch (e) {
			//TODO handle the exception
		}
	};
	defineExpose({
		close,
		open,
	});
</script>

<style lang="scss" scoped>
	.hq{
		width: 196rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		background: #FFEEEE;
		border-radius: 200rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #380303;
	}
	.main {
		padding: 26rpx;
	}

	.active {
		background: #ffdddd !important;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		border: 2rpx solid #fe4369 !important;
		font-size: 28rpx;
		color: #fe4369 !important;
	}

	.input {
		width: 100%;
		height: 110rpx;
		background: #fafafa;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		text-align: center;
		line-height: 110rpx;
	}

	.title {
		font-weight: 400;
		font-size: 32rpx;
		color: #000000;
		line-height: 48rpx;
		text-align: center;
		padding-bottom: 32rpx;
	}

	.tip {
		font-weight: 400;
		font-size: 28rpx;
		color: #696969;
		line-height: 48rpx;
		padding: 22rpx 0;
	}

	.box {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		/* 三列 */
		gap: 40rpx 26rpx;
		padding: 0 24rpx;
		&-item {
			width: 186rpx;
			height: 88rpx;
			border-radius: 10rpx;
			border: 2rpx solid #dddddd;
			text-align: center;
			line-height: 88rpx;
			box-sizing: border-box;
		}
	}

	.btn {
		width: 100%;
		height: 80rpx;
		background: #F04E2A;
		border-radius: 200rpx;
		text-align: center;
		line-height: 80rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #ffffff;
	}

	.bb {
		font-weight: 400;
		font-size: 28rpx;
		color: #787878;
		line-height: 48rpx;
		padding: 16rpx 0;
	}
</style>